import React from 'react';

import { Button, Card, Form } from 'antd';
import { history } from 'umi'

import LabelValue from '@/components/LabelValue';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { useRequest } from '@/hooks';
import { formatResultByFetchDetail } from '@/pages/TurnoverSetting/EntrySetting/util';

import { FilePreviewAndUpload } from '../components';
import { getEntryContractTemplateConfigDetail } from '../services';
import styles from './index.less';

/**
 * 入职时间变更邮件详情
 */
const EntryLaborContractDetail = ({ location }) => {
    const { query } = location;
    const { id } = query;
    const [previewUrl, setPreviewUrl] = React.useState();
    const [fileLists, setFileLists] = React.useState([]);

    // 获取已存在的数据
    const { data, loading } = useRequest(() => getEntryContractTemplateConfigDetail(id), {
        ready: id,
        formatResult: formatResultByFetchDetail,
        onSuccess: res => {
            setFileLists(res?.resCombineBusinessResourceDtoList?.[0] || []);
            setPreviewUrl(res?.resCombineBusinessResourceDtoList?.[0]?.url);
        }
    });

    return (
        <PageHeaderWrapper>
            <Card
                title="劳动合同模板详情"
                bordered={false}
                loading={loading}
                extra={
                    <Button
                        type="primary"
                        onClick={() => {
                            history.push({
                                pathname: '/office/personnelManagement/onboardAndLeave/setting/entryLaborContract/edit',
                                query: { id: query?.id }
                            });
                        }}
                    >
                        编辑
                    </Button>
                }
            >
                <Form className={styles.formWrap}>
                    <LabelValue
                        label="模板名称"
                        value={data?.settingName}
                        align="top"
                        labelClassName={styles.labelClass}
                        valueClassName={styles.valueClass}
                    />
                    <LabelValue
                        align="top"
                        labelClassName={styles.labelClass}
                        valueClassName={styles.valueClass}
                        label="适用行政机构"
                        value={data?.isDefault === 1 ? '全集团' : data?.administrativeScopeNames.join('、')}
                    />
                    <LabelValue
                        align="top"
                        labelClassName={styles.labelClass}
                        valueClassName={styles.valueClass}
                        label="合同文件"
                        value={() => <FilePreviewAndUpload previewUrl={previewUrl} disabled fileLists={fileLists} />}
                    />
                </Form>
            </Card>
        </PageHeaderWrapper>
    );
};

EntryLaborContractDetail.displayName = 'EntryLaborContractDetail';

export default React.memo(EntryLaborContractDetail);
